import { Player } from '../../types';
import { useGameStore } from '../../store/gameStore';

interface PlayerPanelProps {
  player: Player;
}

export default function PlayerPanel({ player }: PlayerPanelProps) {
  const game = useGameStore(state => state.game);
  const isCurrentPlayer = game?.players[game.currentPlayerIndex]?.id === player.id;

  return (
    <div
      className={`bg-white rounded-lg shadow-lg p-4 ${
        isCurrentPlayer ? 'ring-2 ring-purple-500' : ''
      } ${player.isBankrupt ? 'opacity-50' : ''}`}
    >
      <div className="flex items-center gap-3 mb-3">
        <span className="text-3xl">{player.character.avatar}</span>
        <div className="flex-1">
          <h3 className="font-bold">{player.name}</h3>
          <p className="text-sm text-gray-600">{player.character.name}</p>
        </div>
      </div>

      <div className="space-y-2 text-sm">
        <div className="flex justify-between">
          <span className="text-gray-600">资金：</span>
          <span className="font-bold text-green-600">${player.money}</span>
        </div>

        <div className="flex justify-between">
          <span className="text-gray-600">地块：</span>
          <span className="font-bold">{player.properties.length}</span>
        </div>

        <div className="flex justify-between">
          <span className="text-gray-600">位置：</span>
          <span className="font-bold">{player.position}</span>
        </div>

        {player.isBankrupt && (
          <div className="text-red-600 font-bold text-center mt-2">
            已破产
          </div>
        )}

        {isCurrentPlayer && !player.isBankrupt && (
          <div className="text-purple-600 font-bold text-center mt-2">
            当前回合
          </div>
        )}
      </div>
    </div>
  );
}
